let box=document.querySelector('.preview_img');
let small=document.querySelector('.small');
let mask=document.querySelector('.mask');
let big=document.querySelector('.big');
let bigimg=big.firstElementChild;
// console.log(box,bigimg);

box.onmouseenter=function(){
    mask.style.display='block';
    big.style.display='block';
}
box.onmouseleave=function(){
    mask.style.display='none';
    big.style.display='none';
}

let boxl=box.offsetLeft;
let boxt=box.offsetTop;
small.onmousemove=function(eve){
    let pagex=eve.pageX;
    let pagey=eve.pageY;
    let maskw=mask.offsetWidth;
    let maskh=mask.offsetHeight;
    let mousex=pagex-boxl-maskw/2;
    let mousey=pagey-boxt-maskh/2;

    if(mousex<0) mousex=0;
    if(mousey<0) mousey=0;
    let smallmaxr=small.offsetWidth-maskw;
    let smallmaxb=small.offsetHeight-maskh;
    if(mousex>smallmaxr) mousex=smallmaxr;
    if(mousey>smallmaxb) mousey=smallmaxb;

    mask.style.left=mousex+'px';
    mask.style.top=mousey+'px';

    let bigmaxt=bigimg.offsetHeight-big.offsetHeight;
    let bigmaxl=bigimg.offsetWidth-big.offsetWidth;
    let bigmousex=mousex/smallmaxr*bigmaxl;
    let bigmousey=mousey/smallmaxb*bigmaxt;

    bigimg.style.left=-bigmousex+'px';
    bigimg.style.top=-bigmousey+'px';
}
